<script setup lang='ts'>
import draggable from 'vuedraggable'
import { ref } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()
interface ListType {
    id: number,
    width: number,
    height: number,
    left: number,
    top: number,
    zoom: number,
    data: Array<{
        id: number,
        name: string,
        value?: string,
        src?: string
    }>
}

const list = ref([] as Array<ListType>)
const currentX = ref(0)
const currentY = ref(0)

// 拖拽开始
const onStart = (e: any) => {
    e.originalEvent.preventDefault()
    const img = document.querySelector('.target') as HTMLImageElement
    currentX.value = e.originalEvent.pageX - img.offsetLeft;
    currentY.value = e.originalEvent.pageY - img.offsetTop;
}

// 拖拽结束
const onEnd = (e: any) => {
    e.originalEvent.preventDefault()
    const left = e.originalEvent.pageX - currentX.value;
    const top = e.originalEvent.pageY - currentY.value;
    const img = document.querySelector('.target') as HTMLImageElement
    img.style.left = left / 1280 * 100 + "%"
    img.style.top = top / 720 * 100 + "%"
    list.value[0].left = left / 1280 * 100
    list.value[0].top = top / 720 * 100
}

// 图片缩放
const rollImg = (e: any, id: number) => {
    let direction = e.deltaY > 0 ? 'down' : 'up'
    if (direction === 'up') { // 滑轮向上滚动
        large(id);
    } else { // 滑轮向下滚动
        Small(id);
    }
}

// 放大
const large = (id: number) => {
    const item = list.value.find(item => item.id === id) as ListType
    item.zoom /= 0.9
}

// 缩小
const Small = (id: number) => {
    const item = list.value.find(item => item.id === id) as ListType
    item.zoom *= 0.9
}

list.value.push({
    id: 1,
    width: 20,
    height: 5,
    left: 0,
    top: 0,
    zoom: 1,
    data: [
        {
            id: 1,
            name: '蔡徐坤',
            value: 'IKUN',
        }
    ]
})

</script>


<template>
    <div class="content">
        <div class="draggable">
            <draggable v-model="list" tag="div" :group="{ name: 'group', pull: true, put: true }" animation="100"
                @start="onStart" @end="onEnd" style="width: 100%;height: 100%;" item-key="id">
                <template #item="{ element }">
                    <div :style="{ width: element.width + 'em', height: element.height + 'em', left: element.left + '%', top: element.top + '%', position: 'absolute', cursor: 'move', 'fontSize': element.zoom * 20 + 'px' }"
                        class="target" :draggable="true" @mousewheel.prevent="rollImg($event, element.id)">
                        <div class="part" v-for="res in element.data" :key="res.id">
                            <img :src="res.src" class="gift-icon" v-if="res.src">
                            <span v-if="res.value" class="ipt">{{ res.value }}</span>
                            <span class="ipt" style="margin-left: 20px;">{{ res.name }}</span>
                        </div>
                    </div>
                </template>
            </draggable>
        </div>
        <div style="width: 1500px;text-align: center;margin: 20px 0;">
            <el-button @click="router.back()">返回</el-button>
        </div>
    </div>
</template>


<style scoped>
.content {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.draggable {
    width: 1280px;
    height: 720px;
    background-color: rgb(241, 241, 232);
    margin: 20px 20px;
    overflow: hidden;
    position: relative;
}

.box {
    position: absolute;
}

.part {
    display: flex;
    height: 2.5em;
}

.gift-icon {
    height: 100%;
}

.ipt {
    height: 2.5em;
    line-height: 2.5em;
    height: 100%;
    background-color: transparent;
    border: 0;
    color: orange;
    font-size: 1em;
    font-weight: 600;
    outline: none;
}
</style>